{% extends 'base/base.html' %}
{% load my_filter %}
{% block css %}
    <style>
    .collect{
        float: right;
    }
    </style>
{% endblock %}

{% block js %}
    <script>
        $(".collect").click(function () {
            $.ajax({
                url: "/operate/collect",
                method: "post",
                data: {
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                    "article": {{ object.id }},
                    "user": {{ request.user.id }}
                },
                success: function (res) {
                    if(res.msg === "收藏成功"){
                        $(".collect").attr("src","/media/operate/collect.png")
                        alert("收藏成功")
                    }
                    else if(res.msg === "取消收藏成功"){
                         $(".collect").attr("src","/media/operate/uncollect.png")
                        alert("取消收藏成功")
                    }
                },
                error: function (err) {
                    console.log(err)
                }


            })
        })

    </script>
    <script>
     $("#submitBtn").click(function () {
         let content = $("#commentContent").val();
         if(content.length>0){
             $.ajax({
               url: "/operate/add_comment/",
               method: "post",
               data: {
                   "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                   "user": {{ request.user.id }},
                   "content": content,
                   "article":{{ object.id }}
               },
               success: function (res) {
                    $(".comments").append(`
                    <div class="comment">
                          <h3 style="background: url('${res.data.head}') no-repeat; background-size: contain;padding-left: 20px">${res.data.username}</h3>
                          <div>${res.data.content}</div>
                      </div>
                      `);
                    // 补充：清空评论输入框
                    $("#commentContent").val("");
                },


           })
         }
        else {
            alert("还没评论")
             $("#commentContent").focus();
         }
        })
    </script>
{% endblock %}

{% block main %}
    {% csrf_token %}

<div class="panel panel-default">
  <div class="panel-heading">{{ object.title}}
  {% if user.is_authenticated  %}
      {% if object|has_collected:request.user %}
      <img class="collect" src="/media/operate/collect.png" alt="">
      {% else %}
      <img class="collect" src="/media/operate/uncollect.png" alt="">
      {% endif %}
    {% endif %}
  </div>
  <div class="panel-body">
    {{ object.content|safe }}
  </div>
</div>

    <div class="comments">
    {% for c in object.comment_set.all %}
        <div class="comment">
            <h3 style="background: url('/media/{{ c.user.head }}') no-repeat; background-size: contain;padding-left: 20px">{{ c.user.username }}</h3>
            <div>{{ c.content }}</div>
        </div>
        {% endfor %}
    </div>

    <div>

        <h3>评论</h3>
        <div>
            <textarea id="commentContent" rows="2" style="width: 100%;" placeholder="说点什么..."></textarea>
         </div>
        {% if user.is_authenticated %}
            <button id="submitBtn" style="margin-top: 10px;">提交评论</button>

        {% else %}
            <button>去登录</button>
    {% endif %}
    </div>

{% endblock %}




